<template lang='pug'>
  Modal(v-model="bindModal" title="绑定客户" width="800" :styles="{top: '40px'}")
    Input.input-has-border.mb-15.clear-r-50(v-model="name" search enter-button placeholder="查找公司" @on-search="searchBtn" clearable)
    Table(border :columns="thead" :data="customerList" height="540" :loading="loading" size="small")
      //- div(slot="header")
      //-   .pull-right
          //- i-button.mr-20(type="info" size="small" @click="") 一键绑定
      template(slot-scope="{ row, index }" slot="action")
        Button(v-if="row.bound" type="warning" size="small" @click="unBindBtn(row.id)") 解绑
        Button(v-else type="info" size="small" @click="bindBtn(row.id)") 绑定
      ._table_footer(slot="footer")
        Page(class="_page" :total="totalRows" :current="PageIndex" prev-text="上一页" next-text="下一页" @on-change="onChangePage" show-total)
</template>

<script>
import InsureProjectApi from '@/api/InsureProject.api.js'
export default {
  name:'',
  props:{
    category: Number,
    id: String
  },
  data () {
    return {
      name: '',
      loading: false,
      bindModal: false,
      customerList: [],
      thead: [
        {title: '公司名称', key: 'name',},
        {title: '操作', slot: 'action',},
      ],
      totalRows: 0,
      PageIndex: 1,
      PageSize: 10
    };
  },

  components: {},

  computed: {},

  beforeMount() {},

  mounted() {},

  methods: {
    show () {
      this.bindModal = true
    },
    searchBtn () {
      this.PageIndex = 1
      this.getCustomerList()
    },
    getCustomerList () {
      this.loading = true
      InsureProjectApi.Customers({
        Category: this.category,
        ProjectId: this.id,
        Name: this.name,
        PageIndex: this.PageIndex,
        PageSize: this.PageSize
      }).then(res => {
        this.loading = false
        console.log(res)
        this.customerList = res.data.data
        this.totalRows = this.totalRows = res.data.totalRows
      })
    },
    onChangePage (val) {
      this.PageIndex = val
      this.getCustomerList()
    },
    bindBtn (id) {
      InsureProjectApi.BindCustomer({
        category: this.category,
        projectId: this.id,
        customerId: id
      }).then(res => {
        if (res.data.success) {
          this.$Message.success(res.data.message)
          this.getCustomerList()
        } else {
          this.$Message.error({
            content: res.data.message,
            duration: 10,
            closable: true
          })
        }
      })
    },
    unBindBtn (id) {
      InsureProjectApi.UnBindCustomer({
        category: this.category,
        projectId: this.id,
        customerId: id
      }).then(res => {
        if (res.data.success) {
          this.$Message.success(res.data.message)
          this.getCustomerList()
        } else {
          this.$Message.error({
            content: res.data.message,
            duration: 10,
            closable: true
          })
        }
      })
    }
  },

  watch: {
    id () {
      this.getCustomerList()
    }
  }

}

</script>
<style lang='less'>
  .clear-r-50{
    .ivu-input-icon-clear{
      right: 50px;
    }
  }
</style>
<style lang="less" scoped>
  ._table_footer{
    display: flex;
    justify-content: center;
  }
</style>
